<template>
  <div class="pullNews" :class="true ? 'redBox' : 'cardBox'" v-loading="loading" v-if="getCode">
    <!-- 拉新红包 -->
    <div class="red-box" v-if="true">
      <div class="box">
        <img
          src="https://link-wechat-1251309172.cos.ap-nanjing.myqcloud.com/2023-03-03/t1677814651942-4wKctmR7SrrcdOzh.png"
          alt=""
          class="red-img"
        />
        <div class="open" @click="openClick">
          <img
            src="https://link-wechat-1251309172.cos.ap-nanjing.myqcloud.com/2023-03-03/t1677814651919-0VENiIvyNMO5Mkha.png"
            alt=""
          />
        </div>
      </div>
    </div>
    <!-- <div class="card-box" v-else-if="this.type === 2"> -->
    <!-- <div class="card-box" v-else>
      <img
        class="title"
        src="https://link-wechat-1251309172.cos.ap-nanjing.myqcloud.com/2023-03-03/t1677814651942-xQkk04VVBqRemGfo.png"
      />
      <div class="center">
        <img
          src="https://link-wechat-1251309172.cos.ap-nanjing.myqcloud.com/2023-03-03/t1677840116282-sESFp4h9VUZoGFq3.png"
          alt=""
          class="center-img"
        />
        <img
          src="https://link-wechat-1251309172.cos.ap-nanjing.myqcloud.com/2023-03-06/t1678068796980-372EbZGy3xi08bK6.png"
          alt=""
          class="center-button"
          @click="openClick"
        />
      </div>
      <img
        class="bottom"
        src="https://link-wechat-1251309172.cos.ap-nanjing.myqcloud.com/2023-03-03/t1677814651939-brGBeyuiGrjGgWrt.png"
      />
    </div> -->
    <van-popup
      v-model="show"
      round
      position="bottom"
      :style="{ height: '322px' }"
      closeable
      close-icon-position="top-right"
    >
      <div class="contentQR">
        <div class="codeQR">
          <img :src="qrCodeUrl" alt="" />
        </div>
        <div class="codeQRText">长按添加员工，立刻参与活动</div>
      </div>
    </van-popup>
  </div>
</template>

<script>
import { getWxCode } from '@/utils/index'
import { getWxTicket } from '@/api/common'
import { getPullNewsCode } from '@/api/pullNews'

export default {
  data() {
    return {
      show: false,
      qrCodeUrl:
        'https://link-wechat-1251309172.cos.ap-nanjing.myqcloud.com/2023-03-03/t1677839536835-Bl7zBbrVLkwb2m06.png',
      userInfo: {},
      type: 1,
      loading: false,
      getCode: false, // 已获取用户信息
    }
  },
  async created() {
    this.type = this.$route.query.type
    await getWxCode()
    this.getCode = true
    if (sessionStorage.getItem('userinfo')) {
      this.userInfo = JSON.parse(sessionStorage.getItem('userinfo'))
      getWxTicket(window.location.href.split('#')[0]).then((res) => {
        if (res.code === 200) {
          let { timestamp, nonceStr, signature } = res.data
          wx.config({
            beta: true,
            debug: false,
            appId: sessionStorage.getItem('weAppId'),
            timestamp, // 必填，生成签名的时间戳
            nonceStr, // 必填，生成签名的随机串
            signature, // 必填，签名，见附录-JS-SDK使用权限签名算法
            jsApiList: ['getLocation', 'chooseImage', 'previewImage'], //必填
            openTagList: ['wx-open-launch-weapp'],
            success: function(res) {
              location.reload()
            },
            fail: (res) => {
              this.$toast.clear()
              alert('config失败:' + JSON.stringify(res))
              if (res.errMsg.indexOf('function not exist') > -1) {
                alert('版本过低请升级')
              }
            },
          })
        }
      })
    }
  },
  methods: {
    getData() {
      getPullNewsCode({
        qrId: this.$route.query.id,
        unionid: this.userInfo.unionId,
      })
        .then((res) => {
          this.loading = false
          if (res.code === 200) {
            // 新客户
            this.show = true
            this.qrCodeUrl = res.data.qrCode
          } else if (res.code === -1) {
            this.$dialog
              .confirm({
                title: '提示',
                message: '您已经是企业客户啦，暂不符合该拉新活动要求。',
              })
              .then(() => {})
              .catch(() => {
                // on cancel
              })
          }
        })
        .catch(() => {
          this.loading = false
        })
    },
    // 点击开
    openClick() {
      this.loading = true
      this.getData()
      // if (this.getCode) {
      //   //首次登录
      //   this.getData()
      // } else {
      //   setTimeout(function() {
      //     this.getData()
      //   }, 1000)
      // }
    },
    aaa(e) {
      let img = e.target.dataset.src
      wx.previewImage({
        current: img,
        urls: [img],
      })
    },
  },
}
</script>

<style lang="less" scoped>
.pullNews {
  width: 100%;
  height: 100vh;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  .red-box {
    width: 100%;
    .box {
      position: relative;
      width: 100%;
      .red-img {
        width: 100%;
      }
      .open {
        position: absolute;
        top: 50%-6px;
        left: 50%;
        transform: translate(-50%);
        img {
          width: 172px;
          height: 167px;
        }
      }
    }
  }
  .card-box {
    width: 100%;
    // height: 100%;
    height: 100vh;
    position: relative;
    // display: flex;
    // align-items: center;
    .title {
      // position: absolute;
      // top: 40px;
      // top: 20px;
      margin-top: 20px;
      // left: 50%;
      // transform: translate(-50%);
    }
    .center {
      width: 100%;
      // height: 400px;
      // position: absolute;
      // bottom: 56px;
      // left: 50%;
      // transform: translate(-50%);
      position: relative;
      .center-img {
        width: 120%;
      }
      .center-button {
        position: absolute;
        left: 50%;
        transform: translate(-50%);
        bottom: 80px;
        width: 70.8%;
        // height: 66px;%
      }
    }
    .bottom {
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translate(-50%);
    }
  }
}
.redBox {
  display: flex;
  align-items: center;
  background-image: url('https://link-wechat-1251309172.cos.ap-nanjing.myqcloud.com/2023-03-03/t1677830007430-chfqmd2lPg7wNfw0.png');
}
.cardBox {
  background-image: url('https://link-wechat-1251309172.cos.ap-nanjing.myqcloud.com/2023-03-03/t1677835592046-y1nhbt1l3U2KHlpL.png');
}
.contentQR {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  justify-content: center;
  .codeQR {
    margin-top: 60px;
    width: 200px;
    height: 200px;
    border-radius: 8px 8px 8px 8px;
    margin-bottom: 16px;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .codeQRText {
    width: 260px;
  }
  span {
    width: 208px;
    height: 17px;
    font-size: 16px;
    font-weight: 500;
    color: #1d2129;
    line-height: 17px;
  }
}
</style>
